<template>
	<div v-if="contentLoaded" style="paddingBottom: 3rem">
		<router-link to="/address">
			<AddressHeader :address="addressInfo"></AddressHeader>
		</router-link>
		<PayList></PayList>
		<PayNote :bonus="bonus" :postage="postage" ph="可以在这留下您的备注…" v-model="note"></PayNote>
		<PayFooter :price="totalPrice" @pay="pay" :class="{disabled: !available || !addressInfo}"></PayFooter>
	</div>
</template>
<script>
import { Indicator} from 'mint-ui'
import { mapMutations, mapGetters, mapActions } from 'vuex'
import AddressHeader from '@/components/AddressHeader'
import PayList from './PayList'
import PayNote from './PayNote'
import PayFooter from './PayFooter'
import WxLogin from '@/api/wxlogin'
export default{
	name:'CreateOrder',
	async created(){
		// await this.WxPayLogin()
		this.settleCartGoods()
	},
	data(){
		return {
			contentLoaded: false,
			available: true,
			note:''
		}
	},
	computed:{
		...mapGetters({
			addressInfo: 'pay/addressInfo',
			goodsInfo: 'pay/goodsInfo',
			postage: 'pay/postage',
			bonus: 'pay/bonus',
			totalPrice: 'pay/totalPrice'
		}),
	},
	methods:{
		...mapActions({
			toSettleCartGoods: 'pay/toSettleCartGoods',
			submitOrder: 'pay/submitOrder',
			payOrder: 'pay/payOrder',
		}),
		async WxPayLogin() {
			Indicator.open('支付环境监测中…')
			await WxLogin.ifWxPayLoggedIn()
			Indicator.close()
		},
		async settleCartGoods() {
			Indicator.open()
			this.available = await this.toSettleCartGoods()
			// 若无待结算商品 则返回首页
			if(!this.available) this.$router.push('')
			this.contentLoaded = true
			Indicator.close()
		},
		async pay() {
			if(!this.available || !this.addressInfo) return
			Indicator.open()
			const orderFormLogId = await this.submitOrder({note: this.note})
			Indicator.close()
			this.payOrder({router: this.$router, orderFormLogId: orderFormLogId, type: 1})
		},
		beforeDestroy() {
		}
	},
	components: { AddressHeader, PayList, PayNote, PayFooter }
}
</script>
<style lang='less' scoped></style>